<template>
	<view class="page">
		<view class="to-be-paid">
			<view class="state" v-if="list.status == 1">待服务</view>
			<view class="state" v-if="list.status == 2">服务中</view>
			<view class="state" v-if="list.status == 3">已完成</view>
			<view class="time-remaining">请按服务时间及时进行服务。</view>
		</view>
		<!-- 预约信息 -->
		<view class="booking-info">
			<view class="top-booking-title">
				<view class="line"></view>
				<view class="title">预约信息</view>
			</view>
			<view class="booking-list">
				<view class="booking-item">
					<view>预约服务</view>
					<text class="right">{{ list.serviceName }}</text>
				</view>
				<view class="booking-item" v-if="list.treatmentTime">
					<view>期望服务时间</view>
					<text class="right">{{ list.treatmentTime }}</text>
				</view>
				<view class="booking-item" v-if="list.patientName">
					<view>服务对象</view>
					<text class="right">{{ list.patientName }} {{ list.patientSex == 1 ? '男' : '女' }} {{ list.patientAge }}岁</text>
				</view>
				<view class="booking-item" v-if="list.serviceAddress">
					<view>服务地址</view>
					<text class="right">{{ list.serviceAddress }}</text>
				</view>
				<view class="booking-item">
					<view>联系电话</view>
					<text @click="call(list.telephone)" class="right">{{ list.telephone }}</text>
					<view class="copy" @click.stop="copy(list.telephone)">复制</view>
				</view>
				<view class="booking-item">
					<view>就诊医院</view>
					<text class="right">{{ list.hospitalName }}</text>
					
				</view>
				<view class="booking-item">
					<view>其他需求</view>
					<text class="right">{{ list.serviceRequirements || '无' }}</text>
				</view>
			</view>
		</view>

		<view class="booking-info">
			<view class="top-booking-title">
				<view class="line"></view>
				<view class="title">订单信息</view>
			</view>
			<view class="booking-list">
				<view class="booking-item" v-if="list.receiverName">
					<view>收货人姓名</view>
					<text class="right">{{ list.receiverName }}</text>
					<view class="copy" @click="copy(list.receiverName)">复制</view>
				</view>
				<view class="booking-item" v-if="list.receiverPhone">
					<view>收货人手机号</view>
					<text @click="call(list.receiverPhone)" class="right">{{ list.receiverPhone }}</text>
					<view class="copy" @click.stop="copy(list.receiverPhone)">复制</view>
				</view>
				<view class="booking-item" v-if="list.receiverAddress">
					<view>收货人地址</view>
					<text class="right">{{ list.receiverProvinceName }}{{ list.receiverCityName }}{{ list.receiverAreaName }}{{ list.receiverAddress }}</text>
					<view class="copy" @click="copy(list.receiverProvinceName + list.receiverCityName + list.receiverAreaName + list.receiverAddress)">复制</view>
				</view>
				<view class="booking-item">
					<view>下单时间</view>
					<text class="right">{{ list.createTime }}</text>
				</view>
				<view class="booking-item">
					<view>应付金额</view>
					<text class="right">{{ list.payAmount }}</text>
				</view>
				<view class="booking-item">
					<view>订单编号</view>
					<text class="right">{{ list.orderSn }}</text>
					<view class="copy" @click="copy(list.orderSn)">复制</view>
				</view>
				<view class="booking-item" v-if="list.status != 0">
					<view>支付时间</view>
					<text class="right">{{ list.payTime }}</text>
				</view>
				<view class="booking-item" v-if="list.status != 0">
					<view>陪诊师</view>
					<text class="right">{{ list.escortName }}</text>
				</view>
				<view class="booking-item" v-if="list.status != 0 && list.status != 1 && list.serviceStartTime">
					<view>服务开始时间</view>
					<text class="right">{{ list.serviceStartTime }}</text>
				</view>
				<view class="booking-item" v-if="list.status != 0 && list.status != 1 && list.serviceEndTime">
					<view>服务结束时间</view>
					<text class="right">{{ list.serviceEndTime }}</text>
				</view>
				<view class="booking-item" v-if="list.status == 90 || (list.status == 91 && list.refundStartTime)">
					<view>退款开始时间</view>
					<text class="right">{{ list.refundStartTime }}</text>
				</view>
				<view class="booking-item" v-if="list.status == 90 || (list.status == 91 && list.refundEndTime)">
					<view>退款完成时间</view>
					<text class="right">{{ list.refundEndTime }}</text>
				</view>

				<view class="booking-item" v-if="list.takingMedicine">
					<view>服用药品</view>
					<text class="right">{{ list.takingMedicine }}</text>
				</view>
				<view class="booking-item" v-if="list.medicationTime">
					<view>服药时间</view>
					<text class="right">{{ list.medicationTime }}</text>
				</view>
				<view class="booking-item" v-if="list.nextInspectionTime">
					<view>下次检查时间</view>
					<text class="right">{{ list.nextInspectionTime }}</text>
				</view>
				<view class="booking-item" v-if="list.serviceRecord">
					<view>服务记录</view>
					<text class="right">{{ list.serviceRecord }}</text>
				</view>
				<view class="booking-imgs" v-if="list.imageList">
					<view class="title">服务记录图片</view>
					<view class="img-list"><image v-for="(item, index) in list.imageList" :key="index" :src="item"></image></view>
				</view>
			</view>
		</view>

		<!-- 底部预约服务 -->
		<view class="bottom-fixed-box">
			<view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="contact">
					<image class="icon" src="/static/images/customersy.png"></image>
					<view class="text">客服</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view @click="customer">
					<image class="icon" src="/static/images/customersy.png"></image>
					<view class="text">客服</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view @click="HCustomer">
					<image class="icon" src="/static/images/customersy.png"></image>
					<view class="text">客服</view>
				</view>
				<!-- #endif -->
			</view>

			<view class="cancel-btn" @click="begin" v-if="list.status == 1">开始服务</view>
			<view class="cancel-btn" @click="goPage" v-if="list.status == 2">服务完成</view>
		</view>
		<code-popup ref="popup"></code-popup>
	</view>
</template>

<script>
import CodePopup from '@/components/codePopup.vue';
import { getOrderDetail, serviceStart } from '@/apis/request.js';
export default {
	components: {
		CodePopup
	},
	data() {
		return {
			id: '',
			list: {},
			sweixin: null
		};
	},
	filters: {
		formatStatus(status) {
			if (status == 0) {
				return '待支付';
			} else if (status == 1) {
				return '待服务';
			} else if (status == 2) {
				return '服务中';
			} else if (status == 3) {
				return '服务完成';
			}
		}
	},
	onLoad(options) {
		this.orderId = options.orderId;
		this.getList();
		// #ifdef APP-PLUS
		this.getPlus();
		// #endif
	},
	methods: {
		copy(data) {
			uni.setClipboardData({
				data: data,
				success: res => {
					this.$Toast('复制成功');
				}
			});
		},
		HCustomer() {
			this.$refs.popup.show = true;
		},
		//获取详情
		getList() {
			getOrderDetail({
				orderId: this.orderId
			}).then(res => {
				this.list = res;
				if (res.serviceRecordImage) {
					this.list.imageList = res.serviceRecordImage.split(',');
				}
			});
		},
		//开始服务
		begin() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '是否开始服务',
				success: function(res) {
					if (res.confirm) {
						serviceStart({
							orderId: that.orderId
						}).then(res => {
							that.getList();
							uni.$emit('getOrderPageList')
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//服务完成跳转
		goPage() {
			uni.navigateTo({
				url: '/pages/attendantPages/serviceComplete?orderId=' + this.list.id
			});
		},
		call(phone) {
			let phoneNum = [];
			phoneNum.push(phone);
			uni.showActionSheet({
				itemList: phoneNum,
				success: function(res) {
					uni.makePhoneCall({
						phoneNumber: phoneNum[0]
					});
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
		},
		customer() {
			console.log(this.sweixin, 1111);
			this.sweixin.launchMiniProgram({
				id: 'gh_40c57493134e' //要跳转小程序的原始ID
			});
		},
		getPlus() {
			//获取当前显示的webview
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var currentWebview = page.$getAppWebview();
			//调用H5+APP的扩展API
			var shares = null;
			let that = this;
			var pusher = plus.share.getServices(
				function(s) {
					shares = {};
					for (var i in s) {
						var t = s[i];
						shares[t.id] = t;
					}
					that.sweixin = shares['weixin'];
				},
				function(e) {
					console.log('获取分享服务列表失败：' + e.message);
				}
			);
			//放入当前的webview
			currentWebview.append(pusher);
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background-color: #f2f2f2;
	height: 100%;
	min-height: 100vh;
	padding-bottom: 148rpx;

	.to-be-paid {
		width: 750rpx;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #32C59A;

		.state {
			font-size: 34rpx;
			color: #fff;
		}

		.time-remaining {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #fff;
		}
	}

	.booking-info {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.top-booking-title {
			display: flex;
			align-items: center;

			.line {
				margin-top: 4rpx;
				width: 6rpx;
				height: 30rpx;
				border-radius: 4rpx;
				background: #32C59A;
			}

			.title {
				font-size: 32rpx;
				margin-left: 10rpx;
			}
		}

		.booking-item {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			color: #020202;

			.right {
				flex: 1;
				text-align: right;
				color: #999999;
			}

			.copy {
				flex-shrink: 0;
				margin-left: 10upx;
				padding: 2upx 10upx;
				color: $uni-color-primary;
				font-size: 22upx;
				border: 1upx solid $uni-color-primary;
				border-radius: 22upx;
			}
		}

		.booking-imgs {
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #020202;

			.img-list {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin: 18rpx 18rpx 0 0;
				}
			}
		}
	}

	.bottom-fixed-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.icon {
			height: 42rpx;
			width: 42rpx;
		}

		.text {
			font-size: 20rpx;
		}

		.cancel-btn {
			margin-right: 20rpx;
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 35rpx;
			font-size: 28rpx;
			color: #999999;
			border: 2rpx solid #dbdbdb;
		}
	}
}

/deep/ .u-back-text {
	min-width: 70rpx;
}

button::after {
	border: none;
}

button {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	line-height: 1.35;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	background-color: #fff;
}
</style>
